<template>
	<div class="home">

		<el-container>
			<!-- 头部导航 -->
		  <el-header style="height: 50px;width: 100%;">
		  <p style="color: #D1C2D8;font-size: 30px;float: left;margin-top: 10px;">慧点众筹交易平台</p>
			 <div style="margin-left: 800px;margin-top: 20px;"> 
			 <el-link @click="login()" type="primary"style="font-size: 20px;">登录</el-link>
			 &nbsp;
			  <el-link @click="zhuce()"  type="success" style="font-size: 20px;">注册</el-link>
			  &nbsp;I&nbsp;I&nbsp;I
			  <el-link @click="logout()()" target="_blank" style="color: aliceblue;font-size: 20px;">注销</el-link>
			   &nbsp;I&nbsp;I&nbsp;I
			  <el-link style="font-size: 20px;" type="warning" @click="loginH()">管理员登录</el-link>
			  </div>
		  </el-header>
		  
		  
		  <!-- 主体-->
		  <el-main style="width: 100%;">
			  <!-- 轮播图 -->
			 <div class="lunbo">
			 	<el-carousel :interval="5000" arrow="always" style="width: 100%;height: 500px;">
			 		<el-carousel-item v-for="item in pList" style="width: 100%;height: 500px;">
					<el-link @click="project()"  type="success">
			 		<img style=" height: auto;
					max-width: 100%;
					max-height: 500px;
					vertical-align: bottom;
					bottom: 0;
					-o-object-fit: fill;
					object-fit: fill;" 
					src="../img/1.jpg">
					</el-link>
					<el-button @click="welcome()">11</el-button>
			 		</el-carousel-item>
			 	</el-carousel>	  
			 </div>
			  <!-- 主体内容-->
			  <div class="main_height">
				  
				          <div class="zs">
				            <img  src="../img/1.jpg" alt="Generic placeholder image" style="width: 300px; height: 300px;">
				            <h2 style="margin: auto;">智能高清机器人</h2>
				            <p style="width: 300px;margin: auto;">可爱的造型，摄像安防远程互联网的全能设计，让你随时随地地守护您的家人，陪伴你的生活</p>
				            <p><el-link @click="project()"  type="success">项目详情</el-link></p>
				          </div>
						  <div class="zs">
						    <img  src="../img/1.jpg" alt="Generic placeholder image" style="width: 300px; height: 300px;">
						    <h2 style="margin: auto;">智能高清机器人</h2>
						    <p style="width: 300px;margin: auto;">可爱的造型，摄像安防远程互联网的全能设计，让你随时随地地守护您的家人，陪伴你的生活</p>
						     <p><el-link @click="project()"  type="success">项目详情</el-link></p>
						  </div>
						  <div class="zs">
						    <img  src="../img/1.jpg" alt="Generic placeholder image" style="width: 300px; height: 300px;">
						    <h2 style="margin: auto;">智能高清机器人</h2>
						    <p style="width: 300px;margin: auto;">可爱的造型，摄像安防远程互联网的全能设计，让你随时随地地守护您的家人，陪伴你的生活</p>
						     <p><el-link @click="project()"  type="success">项目详情</el-link></p>
						  </div>
				      
			  </div>
			  
			<!-- 分类 -->
				<!-- 科技类 -->
				
				 <el-card class="box-card">
				   <div slot="header" class="clearfix">
				     <span style="color: #409EFF;">科技类</span>
				     <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
				   </div>
				   <div :span="6" v-for="(o,index) in 4" :key="o" :offset="index > 0 ? 4 : 0" class="text item">
				    
				         <div class="xm">
							 <el-link @click="project()"  type="success">
				           <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 290px;" class="image">
				          </el-link>
						   <div style="padding: 14px;">
				             <span>好吃的汉堡</span>
							 <div>
							 <p style="float: left;" class="el-icon-user-solid">12345</p>
							 <p style="float: right;" class="el-icon-date">2001-1-1</p>
							 </div>
				             <el-progress :percentage="99" :format="format"></el-progress>
							<p>已筹金额：999</p>
				           </div>
				         </div>
				     
				   </div>
				 </el-card>
				 
				<!-- 服装类 -->
				
				  <el-card class="box-card">
				    <div slot="header" class="clearfix">
				      <span style="color: #409EFF;">服装类</span>
				      <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
				    </div>
				    <div v-for="o in 4" :key="o" class="text item">
				     <div class="xm">
						<el-link @click="project()"  type="success">
				       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 290px;" class="image">
				       </el-link>
					   <div style="padding: 14px;">
				         <span>好吃的汉堡</span>
						<div>
						 <p style="float: left;" class="el-icon-user-solid">12345</p>
						 <p style="float: right;" class="el-icon-date">2001-1-1</p>
						 </div>
						 <el-progress :percentage="99" :format="format"></el-progress>
						<p>已筹金额：999</p>
				       </div>
				     </div>
				    </div>
				  </el-card>
				
				<!-- 农业类 -->
				  <el-card class="box-card">
				    <div slot="header" class="clearfix">
				      <span style="color: #409EFF;">农业类</span>
				      <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
				    </div>
				    <div v-for="o in 4" :key="o" class="text item">
				     <div class="xm">
						<el-link @click="project()"  type="success">
				       <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 290px;" class="image">
				       </el-link>
					   <div style="padding: 14px;">
				         <span>好吃的汉堡</span>
						<div>
						 <p style="float: left;" class="el-icon-user-solid">12345</p>
						 <p style="float: right;" class="el-icon-date">2001-1-1</p>
						 </div>
						 <el-progress :percentage="99" :format="format"></el-progress>
						<p>已筹金额：999</p>
				       </div>
				     </div>
				    </div>
				  </el-card>
		  </el-main>
		  <el-footer style="width: 99%;">
			  <!-- 脚部-->
			  最终解释权归***所有
		  </el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
	  name: 'Home',
	  data(){
		  return {
			pList:['1.jpg','2.jpg','3.jpg','4.jpg'],
			img:''
		  };
	  },
		methods: {
			//后端登录
			loginH(){
				 this.$router.push('/loginH')
			},
			//登录
			login() {
				this.$router.push('/login')
			},
			// 注销
			logout() {
				window.sessionStorage.clear();
				this.$router.push('/login')
			},
			// 注册
			zhuce() {
				this.$router.push('/zhuce')
			},
			// 项目展示
			project() {
				this.$router.push('/project')
			},
			// 进度条
			format(percentage) {
				return percentage === 100 ? '筹满' : `${percentage}%`;
			},
			welcome() {
				this.$router.push('/welcome')
			}
		}
	}
</script>

<style>
	.main_main {
		width: 95%;
		background-color: black;
		margin: 0 auto;
	}

	.li-data {
		width: 33.3%;
		height: 200px;
		box-sizing: border-box;
		border: 1px solid aliceblue;
		float: left;
		background-color: red;
	}

	/* 中部 */
	.main_height {
		width: 100%;
		height: 600px;
		margin: 0 auto;
	}

	/* c位展示 */
	.zs {
		width: 33%;
		float: left;
		margin-top: 100px;
	}

	.el-header {
		background-color: rgb(51, 51, 51);
		color: #333;
		text-align: center;
		margin: 0 auto;

	}

	.el-footer {
		background-color: rgb(255, 255, 249);
		color: #909399;
		text-align: center;
		height: 60px;
		margin: 0 auto;
	}

	.el-main {
		text-align: center;
		margin: 0 auto;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.lunbo {
		width: 100%;
		height: 500px;
		position: relative;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
  
	.xm{
			  width: 300px;
			  float: left;
			  margin-left: 20px;
			  border: #D1C2D8 solid 1px;
			  position: relative;
			  left: 10px;
	}
	.box-card{
			  /* position: relative;*/
			  left: 30px;
			  width: 95%;
	}
</style>
